<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="renderer" content="webkit" />
  <meta name="full-screen" content="yes" />
  <meta name="x5-fullscreen" content="true" />
  <meta name="format-detection" content="telphone=no, email=no" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <title>AKjs移动端框架</title>
  <link rel="stylesheet" type="text/css" href="css/akjs.mobile.min.css" /><!--AKjs公共样式库引入-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /><!--布局相关样式-->
  <link rel="stylesheet" type="text/css" href="css/theme.default.css" /><!--颜色相关样式-->
  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" language="javascript" src="js/data.js"></script><!--Json数据-->
  <script type="text/javascript" language="javascript" src="js/akjs.mobile.min.js"></script><!--AKjs引入-->
  <script type="text/javascript" language="javascript" src="js/plugin.js"></script><!--功能插件按需引入-->
</head>
<body>

<!----------Andrew_PopupWin---------->
<header class="press bor_bottom bor_gray_ddd bg_gray_f9f dis_block">
  <button type="button" class="left_0 w_25 pl_3 text_al_l text_12em" id="plug_menu"><i class="text_14em icon-im_fenlei"></i></button>
  <h1 class="text_al_c">瀑布流展示</h1>
</header>

<main>

  <article class="plug_refresh">
    <div class="plug_waterfall module mt_5 mb_5 dis_opa_0 animated fadeIn ani_delay_05s">
      <figure><img src="./img/tibet-3.jpg" /></figure>
      <figure><img src="./img/tibet-2.jpg" /></figure>
      <figure><img src="./img/tibet-1.jpg" /></figure>
      <figure><img src="./img/tibet-5.jpg" /></figure>
      <figure><img src="./img/tibet-4.jpg" /></figure>
      <figure><img src="./img/tibet-6.jpg" /></figure>
      <figure><img src="./img/tibet-3.jpg" /></figure>
      <figure><img src="./img/tibet-2.jpg" /></figure>
      <figure><img src="./img/tibet-1.jpg" /></figure>
      <figure><img src="./img/tibet-5.jpg" /></figure>
      <figure><img src="./img/tibet-4.jpg" /></figure>
      <figure><img src="./img/tibet-6.jpg" /></figure>
    </div>
  </article>

  <!----------Andrew_PopupWin Start---------->
  <div id="plug_MenuWin" class="dis_none fix bg_gray_333 w_50 top_0 zindex_11 h_100 minus_left_50"> <!--左右展开菜单功能 （左侧：minus_left_50，右侧：minus_right_50）-->
    <nav class="module press">
      <h3 class="dis_block text_hidden ovh w_97 c_gray_ccc pl_3 line_h_38em">菜单展示</h3>
      <ul>
        <li class="bor_bottom bor_gray_222 active_gray_555" data-href="demo.html">
          <dl class="rel pl_3 ovh list_h_36em">
            <dt class="fl ovh w_90 text_hidden">
              <i class="c_white text_al_m text_12em icon-mn_baobiao"></i>
              <span class="ml_05em c_white">菜单01</span>
            </dt>
            <dd class="abs wm_94 right_2 c_white text_al_r">
              <i class="text_08em icon-ln_qianjin_b"></i>
            </dd>
          </dl>
        </li>
        <li class="bor_bottom bor_gray_222 active_gray_555" data-href="demo.html">
          <dl class="rel pl_3 ovh list_h_36em">
            <dt class="fl ovh w_90 text_hidden">
              <i class="c_white text_al_m text_12em icon-mn_baobiao"></i>
              <span class="ml_05em c_white">菜单02</span>
            </dt>
            <dd class="abs wm_94 right_2 c_white text_al_r">
              <i class="text_08em icon-ln_qianjin_b"></i>
            </dd>
          </dl>
        </li>
        <li class="bor_bottom bor_gray_222 active_gray_555" data-href="demo.html">
          <dl class="rel pl_3 ovh list_h_36em">
            <dt class="fl ovh w_90 text_hidden">
              <i class="c_white text_al_m text_12em icon-mn_baobiao"></i>
              <span class="ml_05em c_white">菜单03</span>
            </dt>
            <dd class="abs wm_94 right_2 c_white text_al_r">
              <i class="text_08em icon-ln_qianjin_b"></i>
            </dd>
          </dl>
        </li>
        <li class="bor_bottom bor_gray_222 active_gray_555" data-href="demo.html">
          <dl class="rel pl_3 ovh list_h_36em">
            <dt class="fl ovh w_90 text_hidden">
              <i class="c_white text_al_m text_12em icon-mn_baobiao"></i>
              <span class="ml_05em c_white">菜单04</span>
            </dt>
            <dd class="abs wm_94 right_2 c_white text_al_r">
              <i class="text_08em icon-ln_qianjin_b"></i>
            </dd>
          </dl>
        </li>
        <li class="bor_bottom bor_gray_222 active_gray_555" data-href="demo.html">
          <dl class="rel pl_3 ovh list_h_36em">
            <dt class="fl ovh w_90 text_hidden">
              <i class="c_white text_al_m text_12em icon-mn_baobiao"></i>
              <span class="ml_05em c_white">菜单05</span>
            </dt>
            <dd class="abs wm_94 right_2 c_white text_al_r">
              <i class="text_08em icon-ln_qianjin_b"></i>
            </dd>
          </dl>
        </li>
      </ul>
    </nav>
  </div>

</main>

<footer class="press bg_gray_f9f dis_block">
  <menu class="bor_gray_ddd bor_top length5">
    <button type="button" class="fl h_100" data-href="demo.html">
      <i class="text_18em c_gray_777 icon-mn_gongneng"></i>
      <em class="text_08em c_gray_777">功能</em>
    </button>
    <button type="button" class="fl h_100" data-href="demo2.html">
      <i class="text_18em c_gray_777 icon-mn_hudong"></i>
      <em class="text_08em c_gray_777">聊天</em>
    </button>
    <button type="button" class="fl h_100" data-href="demo3.html">
      <i class="text_18em c_gray_777 icon-mn_huodong_fill c_title"></i>
      <em class="text_08em c_gray_777 c_title">瀑布流</em>
    </button>
    <button type="button" class="fl h_100" data-href="demo4.html">
      <i class="text_18em c_gray_777 icon-mn_kuangjia"></i>
      <em class="text_08em c_gray_777">布局</em>
    </button>
    <button type="button" class="fl h_100 new_icon" data-href="demo5.html">
      <i class="text_18em c_gray_777 icon-mn_kongjian"></i>
      <em class="text_08em c_gray_777">加载</em>
    </button>
  </menu>
</footer>

</body>
<script type="text/javascript">
    //引入Andrew插件的区域
    if (window.location.protocol == "file:") {
        alert("AKjs仅支持http或https协议访问！不支持直接打开本地文件的方式访问！通过本地配置服务器访问或者使用WebStorm软件打开访问即可！");
        throw new Error();
    }
    /*-----------------------------------------------Andrew_Config (全局设置）使用方法-------------------------------------------*/
    $(function () {
        Andrew_Config({ //环境配置管理
            MaskStyle: ["style3","opacity07"], //1.所有弹窗背景图案选择（样式style1~8）、2.遮挡层背景的透明度（opacity01~09）
            Responsive: true, //是否开启文字大小按屏幕尺寸自适应变化，考虑到兼容平板电脑建议开启 (开启 true, 停用 false）
            touchstart: true, //是否开启移动端active效果, 建议开启 （元素的class里加touchstart即可用）(使用 true,不使用 false）
            ButtonLink: true, //通过元素中加data-href属性的方式跳转界面, 建议开启路由功能后使用。(使用button超链接 true,不使用button超链接 false）
            WechatHeader: true, //是否通过微信浏览器访问时自动隐藏应用的头部区域, 可以通用建议开启 (使用隐藏 true, 不使用隐藏 false）
            Topdblclick: true, //是否开启点击应用的头部让页面回头顶部 (开启 true, 停用 false）
            fixedBar: true, //输入信息时应用的头部绝对固定在屏幕最上方，底部有输入框时不被虚拟键盘遮挡 （不通过微信访问才生效，开启WechatHeader的参数时请关闭该参数）
            animation: true, //是否开启元素里加动画参数的功能？（例：data-animation="{name: 'zoomIn', duration:1, delay: 0}"） 动画库：andrew.animate.css
            Orientation: true, //是否开启应用只允许竖屏浏览 (使用 true, 不使用 false）
            Prompt: "为了更好的视觉体验，请在竖屏下进行操作。" //应用横屏是提示文字 (必须开启Orientation的选项才能生效)
        });
    });

    /*-----------------------------------------------Andrew_Loader 使用方法-------------------------------------------*/
    $(function () {
        Andrew_Loader({
            //ele: $("main"), //是否使用局部遮挡层，使用请设置指定的局部元素 （不设置任何参数代表使用全部遮挡层）
            autoMode: true, //是否开启指定的时间后自动消失功能 (开启 true, 关闭 false）
            timeToHide:1000, //毫秒时间设置 (automode必须开启才能有效)
            iconColor:"#ffffff", //图标颜色设置
            maskBG: false, //是否开启遮挡背景 (开启 true, 关闭 false）
            Loader:"load_2" //loading效果选择（load_1~7）
        });
        setTimeout(function() { //页面加载完5秒后执行
            if($(".ak-Loader").css('display') == 'none'){
                Andrew_Loader("destroy"); //关闭loading窗
            }
        },2000);
    });

    /*-----------------------------------------------Andrew_Lazyload 使用方法-------------------------------------------*/
    $(function() {
        $("img").Andrew_Lazyload({ //对所有的图片懒加载
            scroll: $("main"), //滚动区域的容器
            scrollTop: 100, //设置初始化滚动条位置（当滚动条滚动到当前设置的位置时所有效果将进行初始化）
            Img_Effect: "fadeIn", //图片加载动画效果
            Img_LoadStyle: "loading01", //图片加载之前显示的Loading效果 （loading01~05）注：Img_Effect，Img_LoadStyle，Img_Error 三个参数是图片懒加载专用参数；
            Img_Error: "./img/noimage.png", //图片加载失败时默认显示图片URL
            Callback: function(ele) { //初始化回调入口
                //console.log(ele);
            },
            Scrollback: function(ele,scroll) { //页面滚动后的回调
                //console.log(ele);
            }
        });
    });

    /*-----------------------------------------------Andrew_Popupwin (左侧方法)使用方法-------------------------------------------*/
    $(function(){
        setTimeout(function() { //为了兼容所有的jQuery版本header元素里面的任何绑定事件都需要延迟执行
            $("#plug_menu").unbind("click");
            $("#plug_menu").bind("click", function (e) {
                Andrew_Popupwin({
                    dom: "#plug_MenuWin", //弹窗内容的布局
                    maskPosition: "3", //Mask的z-index数值
                    closeBtn: "#popup_mask", //关闭弹窗按钮的Class名
                    OneButton: e.currentTarget, //点击按钮和关闭按钮通用时需要加该属性
                    toggleIcon: "text_14em icon-bt_quxiao_a", //是否点击后替换图标功能，加图标的Class名 （建议启用OneButton的参数后使用）
                    callback :function (ele,toggle) { //通过回调获取弹窗显示后的以上参数
                        if (toggle) { //判断是否弹出弹窗
                            $(ele[0].dom).addClass("dis_block_im");
                            $("footer").addClass("zindex_2");
                            $("header, main, footer").animate({
                                "left": "50%"
                            },500);
                            $(ele[0].dom).animate({
                                "left": "0"
                            },500);
                        } else {
                            $("header, main, footer").animate({
                                "left": 0
                            },500);
                            $(ele[0].dom).animate({
                                "left": "-50%"
                            },500);
                            setTimeout(function() {
                                $("footer").removeClass("zindex_2");
                                $(ele[0].dom).removeClass("dis_block_im");
                            },500);
                        }
                        //以下点击事件代码是在路由模式的时候需要
                        /*$(ele[0].dom).find("li").click(function () {
                            $("header, main, footer").css({
                                "left": 0
                            });
                        });*/
                    }
                });
            });
        },100);
    });

    /*-----------------------------------------------Andrew_Popupwin (右侧方法)使用方法-------------------------------------------*/
    /*$(function(){
        setTimeout(function() { //为了兼容所有的jQuery版本header元素里面的任何绑定事件都需要延迟执行
            $("#plug_menu").bind("click", function (e) {
                Andrew_Popupwin({
                    dom: "#plug_MenuWin", //弹窗内容的布局
                    maskPosition:"3", //Mask的z-index数值
                    closeBtn: "#popup_mask", //关闭弹窗按钮的Class名
                    OneButton: e.currentTarget, //点击按钮和关闭按钮通用时需要加该属性
                    toggleIcon: "text_14em icon-bt_quxiao_a", //是否点击后替换图标功能，加图标的Class名 （建议启用OneButton的参数后使用）
                    callback :function (ele,toggle) { //通过回调获取弹窗显示后的以上参数
                        if (toggle) { //判断是否弹出弹窗
                            $(ele[0].dom).addClass("dis_block_im");
                            $("main").addClass("left_au");
                            $("header, main, footer").animate({
                                "right": "50%"
                            },500);
                            $(ele[0].dom).animate({
                                "right": "0"
                            },500);
                        } else {
                            $("header, main, footer").animate({
                                "right": 0
                            },500);
                            $(ele[0].dom).animate({
                                "right": "-50%"
                            },500);
                            setTimeout(function() {
                                $(ele[0].dom).removeClass("dis_block_im");
                                $("main").removeClass("left_au");
                            },500);
                        }
                    }
                });
            });
        },100);
    });*/

    /*-----------------------------------------------Andrew_Waterfall 使用方法-------------------------------------------*/
    $(function(){
        $(".plug_waterfall").Andrew_Waterfall({
            spacingWidth: 5, // 布局的元素水平间距设置
            spacingHeight: 5, // 布局的元素垂直间距设置
            minColCount: 2, // 最小一行显示几个？
            itemAlign: "center", // 布局排列方式 (center|left)
            isFadeIn: true, //是否开启浅入效果 （追加元素中的class必须有ak-fadeIn才有效果）
            ajaxCallback: function(ele, success, end) { //数据加载回调入口
                success();
                /*数据设置*/
                var data = {"data": [
                        { "src": "tibet-3.jpg" }, { "src": "tibet-2.jpg" }, { "src": "tibet-1.jpg" }, { "src": "tibet-5.jpg" }, { "src": "tibet-4.jpg" }, { "src": "tibet-6.jpg" }
                    ]};
                var str = "";
                var templ = '<figure class="bg_white ak-fadeIn"><img src="./img/{{src}}" /></figure>'

                for(var i = 0; i < data.data.length; i++) {
                    str += templ.replace("{{src}}", data.data[i].src);
                }
                /*元素设置*/
                var dropload = "<div class=\"ak-waterfall-down dis_none\"><div class=\"ak-dropload-load\"><span class=\"loading\"></span>加载中...</div></div>\n" +
                    "    <div class=\"ak-waterfall-down dis_none\"><div class=\"ak-dropload-noData\">暂无数据</div></div>";
                if ($(".ak-waterfall-down").length < 3) {
                    ele.parent().append(dropload);
                    ele.parent().css({
                        height: ele.outerHeight()
                    })
                }
                if (ele.children().length < 200) {
                    $(".ak-waterfall-down").eq(0).removeClass("dis_none");
                    $(".ak-waterfall-down").eq(1).addClass("dis_none");
                    $(str).appendTo(ele);
                } else {
                    $(".ak-waterfall-down").eq(0).addClass("dis_none");
                    $(".ak-waterfall-down").eq(1).removeClass("dis_none");
                }
                /*滚动条初始化设置*/
                $("main").scroll(function() {
                    if ($(this).scrollTop() < 100) {
                        $(".ak-fadeIn").remove();
                        setTimeout(function() {
                            ele.css({
                                height: ele.parent().outerHeight()
                            })
                        },500);
                    }
                });
                end();
            }
        });
    });

</script>
</html>